<!--
 @Author: hucong
 @Date: 2022-06-21 17:39:36
 @Description: 申请加库存
-->
<template>
  <div>
    <a-modal title="申请加推" :visible="show" @ok="handleCofirm" @cancel="$emit('update:show', false)" :width="1000">
      <div class="applyAddInventory">
        <div>
          <!-- <div class="top">
            <div class="mb15" v-if="logs && logs.length > 0">
              <TitleBox class="mb15">申请加推日志</TitleBox>
              <a-timeline-item v-for="(item, index) in logs" :key="index">
                <div class="mb10">
                  <span class="pr10"> {{ item.createTime }}</span>
                  <a-tag color="#108ee9" v-if="item.auditStatus == 0">
                    待审核
                  </a-tag>
                  <a-tag color="#87d068" v-if="item.auditStatus == 1">
                    通过
                  </a-tag>
                  <a-tag color="#f50" v-if="item.auditStatus == 2">
                    驳回
                  </a-tag>
                  <span v-if="item.auditStatus == 2">驳回原因：{{ item.auditResult }}</span>
                </div>
                <div class="mb10">增加产品库存： {{ item.addProductStockAmount }}</div>
                <div class="mb10">操作人：{{ item.applicantName }}</div>
              </a-timeline-item>
            </div>
          </div> -->
          <div class="progress">
            <TitleBox class="mb15">申请加推日志</TitleBox>
            <div class="timeline">
              <a-timeline>
                <a-timeline-item v-for="(item, index) in logs" :key="index" color="#0B61FF">
                  <a-icon slot="dot" type="check-circle" style="font-size: 16px;color: #0B61FF;" v-if="item.auditStatus !== -1" />
                  <div class="top">
                    <div class="word-part">
                      <div class="tips-title" :style="{ color: item.auditStatus === -1 ? '#F5894E' : item.auditStatus === 1 ? '#57AE59' : item.auditStatus === 2 ? '#F55F4E' : '#333' }">
                        {{
                          item.auditStatus === -1
                            ? '待审核'
                            : item.auditStatus === 1
                            ? '审核通过'
                            : item.auditStatus === 2
                            ? '审核驳回'
                            : item.auditStatus === 3
                            ? '暂存中，等待资料补充完善'
                            : item.auditStatus === 4
                            ? '已撤回'
                            : '发起申请'
                        }}
                        <span>{{ item.auditDateStr && item.auditDateStr.substring(5, item.auditDateStr.length) }}</span>
                      </div>
                      <div>
                        <!-- field: "productInfo", -->
                        <div v-for="(child, x) in initFormatLogs(item.details)" :key="x">
                          <div v-if="child.field !== 'productInfo' && child.field !== 'pic1' && JSON.parse(child.content) && ['是', '否'].indexOf(JSON.parse(child.content)) === -1">
                            {{ child.fieldName }}：{{ JSON.parse(child.content) }}
                          </div>
                          <div v-if="child.field === 'productInfo'">
                            <div v-if="JSON.parse(child.content).appendAmount && JSON.parse(child.content).list.length > 0">
                              <div v-for="(childs, m) in JSON.parse(child.content).list" :key="m">{{ childs.value }} 加推增加库存数量:{{ JSON.parse(child.content).appendAmount }}</div>
                            </div>
                            <div v-if="JSON.parse(child.content).packetList && JSON.parse(child.content).packetList.length > 0">
                              <div v-for="(childs, m) in JSON.parse(child.content).packetList" :key="m">{{ childs.name }} 加推增加库存数量 {{ childs.appendAmount }}</div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="reason" v-if="item.remark">{{ item.auditStatus === 3 ? '暂存理由' : '处理原因' }}：{{ item.remark }}</div>
                      <div class="tips-user">{{ item.auditUserName }}</div>
                      <div class="tips-user" style="font-weight: 500">审批单号：{{ item.approvalNo || '无' }}</div>
                      <div class="tips-user" style="font-weight: 500">申请人：{{ item.userName || '无' }}</div>
                      <div class="tips-user" style="font-weight: 500">申请时间：{{ item.createDate || '无' }}</div>
                      <div class="tips-user" style="font-weight: 500">审批时间：{{ item.auditDateStr || '无' }}</div>
                    </div>
                  </div>
                </a-timeline-item>
              </a-timeline>
            </div>
            <div class="empty" v-if="logs && logs.length === 0">
              暂无审批进度
            </div>
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import TitleBox from '../../../goodsManag/components/detailsTitle.vue'
import { getProductIdApprovalDetail } from '@/service/applyAdjust.js'

export default {
  components: {
    TitleBox
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    show(val) {
      if (val) {
        this.initExamine()
      }
    }
  },
  data() {
    return {
      formData: {
        name: undefined
      },
      tableData: [],
      initLoading: false,
      logs: []
    }
  },
  mounted() {},
  methods: {
    // 查看审批日志
    async initExamine() {
      const res = await getProductIdApprovalDetail({ productId: this.data.id })
      this.logs = res
    },
    handleCofirm() {
      // this.$emit('confirm', this.formData)
      this.$emit('update:show', false)
    },
    handleSubmit() {},
    // 格式化-展示变动日志
    initFormatLogs(logs) {
      const newLogs = logs
        .map((el) => {
          if (el.field === 'beginTime') {
            const isRadioChangeTime = logs.find((item) => item.field === 'radio-changeTime')

            if (isRadioChangeTime && JSON.parse(isRadioChangeTime.content) === '是') {
              el['content'] = JSON.parse(el.content) ? el.content : JSON.stringify('无')
            }
          }

          return {
            ...el
          }
        })
        .reverse()

      return newLogs
    }
  }
}
</script>

<style scoped lang="scss">
.applyAddInventory {
  /deep/ .ant-form {
    .ant-form-item-label {
      text-align: left;
    }
    textarea {
      resize: none;
    }
  }

  .detailModalNew {
    position: relative;
    .top {
      display: flex;
      width: 100%;
      // justify-content: space-between;
      div {
        width: 33.33%;
      }
    }
    .inlinetop {
      padding-right: 145px;
      justify-content: space-between;
    }
    .applyLog {
      max-height: 400px;
      overflow: auto;
    }
  }
}

.progress {
  background-color: #fff;

  .timeline {
    padding: 35px 42px 0px;

    .top {
      color: #666666;
      font-size: 16px;
      margin-bottom: 20px;

      .word-part {
        max-width: 400px;
        padding-top: 2px;
        padding-left: 10px;
      }

      .tips-title {
        display: flex;
        justify-content: space-between;
        color: #000;
        font-weight: 500;

        span {
          color: #666666;
          font-size: 14px;
          font-weight: normal;
        }
      }

      .reason {
        font-size: 14px;
        padding: 3px 0;
      }
    }

    .refuse {
      line-height: 44px;
      background-color: #fff8f8;
      border-radius: 5px;
      font-size: 14px;
      color: #ff2828;
      padding: 0 13px;
    }
  }

  .edit {
    margin-left: 45px;
  }

  .btns {
    text-align: center;
    padding: 20px 0;
  }
}
</style>
